<template>
	<div @mouseenter="delay(true)" @mouseleave="delay(false)" class="avatar">
		<el-avatar :src="`${ENV.VITE_BASE_URL}${userinfo.userinfo.avatar}`" />
		<transition leave-active-class="animate__animated animate__fadeOut 	" enter-active-class="animate__animated animate__fadeIn animate__faster	">
			<div v-if="settingMenu" class="settingMenu">
				<div class="arrow"></div>
				<ul>
					<li>
						<router-link to="/user">个人中心</router-link>
					</li>
					<li>
						<a href="javascript:void(0);" @click="logout"> 退出 </a>
					</li>
				</ul>
			</div>
		</transition>
	</div>
</template>

<script setup lang="ts">
import { useUserinfoStore } from "@/stores/userinfo";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const ENV = import.meta.env;
const logout = () => {
	userinfo.setToken("");
	userinfo.setUserinfo({});
	router.push("/login");
};
const settingMenu = ref(false);
let timer: NodeJS.Timeout | null = null;
const delay = (boolean: boolean) => {
	if (!(settingMenu.value && boolean)) {
		//如果原本是false到true延迟开启
		//如果原本是true到false延迟关闭
		timer = setTimeout(() => {
			settingMenu.value = boolean;
		}, 300);
	} else if (settingMenu.value && boolean) {
		//如果原本是true到true说明在很短时间内鼠标又回到了菜单，关闭上一次的定时器
		clearTimeout(timer!);
	}
};
const userinfo = useUserinfoStore();
</script>

<style scoped lang="scss">
.settingMenu:before {
	position: absolute;
	top: -16px;
	right: 41px;
	border-bottom: 8px solid #ffffff;
	border-top: 8px solid transparent;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	content: "";
	z-index: 3;
}
.settingMenu:after {
	position: absolute;
	top: -18px;
	right: 40px;
	border-bottom: 9px solid #cccccc;
	border-top: 9px solid transparent;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	content: "";
	z-index: 2;
}
.settingMenu {
	width: 80px;
	top: 46px;
	right: -30px;
	position: absolute;
	z-index: 2;
	background: #fff;
	color: #333;
	border: 1px solid #ccc;
	border-radius: 2px;
	padding: 1px;
	--animate-duration: 0.3s;
	.arrow {
		position: absolute;
		width: 20px;
		height: 20px;
		margin-top: -16px;
		color: red;
		font-style: normal;
	}
	li {
		a {
			font-size: 5px;
			white-space: nowrap;
			min-width: 50px;
			padding: 13px;
			line-height: 1em;
			color: #333;
			display: block;
			text-decoration: none;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		a:hover {
			background-color: $grey;
		}
	}
	li:last-of-type {
		border-top: 1px solid $grey;
		margin: -1px;
		text-align: center;
	}
}
.avatar {
	position: relative;
	.el-avatar {
		cursor: pointer;
	}
}
</style>
